<template>
  <div>
    <transition name="animation">
      <el-card class="box-card" v-show="flag">
        <div slot="header" class="clearfix">
          <h3>转正管理</h3>
        </div>
        <el-button type="primary">导出</el-button>
        <template>
          <!-- <h3>formal转正</h3>
      <el-divider></el-divider> -->
          <el-table
            :data="tableData"
            style="width: 100%"
            stripe
            :header-cell-style="{
              background: '#f5f7f9',
              borderTop: '1px solid #ebeef5',
              textAlign: 'center',
            }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column type="index" width="120" label="序号" fixed>
            </el-table-column>
            <el-table-column prop="name" width="120" label="姓名" fixed>
            </el-table-column>
            <el-table-column prop="organ" width="120" label="部门">
              <template slot-scope="scope">
                {{ scope.row.stationId.name }}
              </template>
            </el-table-column>
            <el-table-column prop="station" width="120" label="岗位">
              <template slot-scope="scope">
                {{ scope.row.organId.name }}
              </template>
            </el-table-column>
            <el-table-column prop="phone" width="120" label="手机号">
            </el-table-column>
            <el-table-column prop="_id" width="220" label="工号">
            </el-table-column>
            <el-table-column prop="sid" width="220" label="证件号">
            </el-table-column>
            <el-table-column prop="nature" width="120" label="工作性质">
            </el-table-column>
            <el-table-column prop="entry" width='220' label="入职日期">
              <template slot-scope="scope">
                {{ scope.row.entry | Day }}
              </template>
            </el-table-column>
            <el-table-column prop="formalTime" width='220' label="转正日期">
              <template slot-scope="scope">
                {{ scope.row.formalTime | Day }}
              </template>
            </el-table-column>
            <el-table-column prop="try" width="120" label="试用期">
            </el-table-column>
            <el-table-column
              fixed="right"
              align="center"
              width="80"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row._id)"
                  type="text"
                  size="small"
                  >转正</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-card>
    </transition>
  </div>
</template>

<script>
export default {
  name: "VueSalarysysFormal",

  data() {
    return {
      tableData: [],
      flag: false,
    };
  },

  mounted() {
    setTimeout(() => {
      (this.flag = true), this.getData();
    }, 100);
  },

  methods: {
    handleClick(id) {
      // console.log(id,'121212221212');
      this.$router.push({ path: "/home/converted", query: { id } });
    },
    async getData() {
      let { data } = await this.$axios.get("/organ/getformal");
      this.tableData = data.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 30px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

//   .box-card {
//     width: 480px;
//   }
// 动画
.animation-enter,
animation-leave-to {
  transform: translateX(50px);
  opacity: 0;
}

.animation-enter-active {
  transition: all 0.5s ease-in-out;
}

.animation-enter-to,
animation-leave {
  transform: translateX(0);
  opacity: 1;
}
</style>